<template>
	<view class="container">
		<userinfo v-if="user_options.toLogin" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
		<view class="container-box">
			<view class="background-color" :style="'background:' + mobile_head_color">
				<view class="topbox" v-if="listdata.village_name">
					<view class="text">
						{{listdata.village_name + " （" + listdata.house_address + "）" }}
					</view>
					<view class="address-box">
						<view class="address-icon">
							<image src="../../../static/images/address.png" class="address-img"></image>
						</view>
						<view class="address-text">{{listdata.village_address}}</view>
					</view>
				</view>
			</view>
			<view class="myrole">
				<view class="my-text">我的角色</view>
				<evan-radio-group @change="onGroupChange" v-model="color1">
					<view class="evan-radio-show__group-item" @click="onRadioClick(index1)" v-for="(item1,index1) in role_list" :key="item1.value">
						<evan-radio :label="item1.type" ref="listRadio" :preventClick="true" style="font-weight: 700;">{{item1.name}}</evan-radio>
						<view class="role-box" style="margin-top: 0rpx;" v-if='index1==num'>
							<view class="chose-btn" style="margin-top: 20rpx;" v-for="(items,indexs) in item1.relatives_type_desc" :key="indexs"
							 @tap="selectrelative(indexs,items.relatives_type)" :class="num1 === indexs?'active':''">{{items.name}}</view>
						</view>
					</view>
				</evan-radio-group>
			</view>
			<!-- 选择属性 -->
			<view class="myrole" v-if="attribute_list[0]">
				<view class="my-text">属性</view>
				<view class="role-box1">
					<view class="chose-btn1" v-for="(item,index) in attribute_list" :key="index" @tap="selectattribute(index,item.pigcms_id)"
					 :class="num2 === index?'active':''">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="myrole" v-if="numlist.room_true_find_status == 1">
				<view class="my-text">请输入业主手机后四位<text class="phone">{{room_true_find.test_phone}}</text></view>
				<view class="input-box">
					<one-input v-model="test" @finish="finished"></one-input>
				</view>
				<view class="role-text">
					<view class="role-icon">
						<image src="../../../static/images/tips.png" class="role-img"></image>
					</view>
					<view class="text1">如不知道业主电话，可主动联系业主或物业</view>
				</view>
			</view>
			<view class="myrole">
				<view class="my-text">申请人信息</view>
				<view class="info-box">
					<view class="card-list">
						<text style="color:red">*</text>
						<view class="card-name" style="margin-left: 15rpx;">姓名</view>
						<view class="card-text" style="width: 100%;">
							<input type="text" v-model="name" maxlength="20" style="padding-right: 20rpx;width: 100%;text-align: right;"
							 value="" placeholder-style="font-size: 24rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #c3c3c3;"
							 placeholder="请输入姓名" />
						</view>
					</view>
					<view class="card-list">
						<text style="color:red">*</text>
						<view class="card-name" style="margin-left: 15rpx;">手机号</view>
						<view class="card-text" style="width: 100%;">
							<input type="number" v-model="phone" maxlength="20" style="padding-right: 20rpx;width: 100%;text-align: right;"
							 value="" placeholder-style="font-size: 24rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #c3c3c3;"
							 placeholder="请输入手机号" />
						</view>
					</view>
					<view class="card-list">
						<view class="card-name">身份证号</view>
						<view class="card-text" style="width: 100%;">
							<input type="text" v-model="IDcard" maxlength="20" style="padding-right: 20rpx;width: 100%;text-align: right;"
							 value="" placeholder-style="font-size: 24rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #c3c3c3;"
							 placeholder="请输入身份证号" />
						</view>
					</view>
					<view class="card-list">
						<view class="card-name">备注</view>
						<view class="card-text" style="width: 100%;">
							<input type="text" v-model="remarks" maxlength="20" style="padding-right: 20rpx;width: 100%;text-align: right;"
							 value="" placeholder-style="font-size: 24rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #c3c3c3;"
							 placeholder="请输入备注内容" />
						</view>
					</view>
					<!-- 自定义填写项 -->
					<view v-for="(items,indexs) in dataList" v-if="dataList.length > 0">
						<view class="card-list" v-if="items.type == 1">
							<text style="color:red" v-if="items.is_must == 1">*</text>
							<view class="card-name" style="margin-left: 15rpx;">{{items.title}}</view>
							<view class="card-text" style="width: 100%;">
								<input type="text" v-model="dataList[indexs].value" maxlength="20" style="padding-right: 20rpx;width: 100%;text-align: right;"
								 value="" placeholder-style="font-size: 24rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #c3c3c3;"
								 placeholder="请输入内容" />
							</view>
						</view>

						<view class="card-lists" style="display: flex;flex-direction: row;align-items: center;" @tap="selectpicker(indexs)" v-if="items.type == 2">
							<view style="display: flex;flex-direction: row;">
								<text style="color:red;line-height: 75rpx;" v-if="items.is_must == 1">*</text>
								<view class="top-title" style="height: 75rpx;line-height: 75rpx;margin-left: 15rpx;">
									{{items.title}}
								</view>
							</view>
							<view class="right-icon">
								<view>{{selectText}}</view>
								<image src="../../../static/images/right.png" class="right-img"></image>
							</view>
							<!-- <view class="switch-box" v-for="(itm,idx) in items.use_field" @tap="switchBtn(indexs,idx,itm)">
								<view class="switch" :class="{ 'switch1':(items['num'] == idx)}">
									<view class="switch-mini" :class="{ 'switch-mini1':(items['num'] == idx)}"></view>
								</view>
								<view class="switch-text">{{itm}}</view>
							</view> -->
						</view>
					</view>
				</view>
				<view class="role-text">
					<view class="role-icon">
						<image src="../../../static/images/tips.png" class="role-img"></image>
					</view>
					<view class="text1">建议使用平台注册的手机号申请，以便正常使用缴费等附加功能</view>
				</view>
			</view>
			<view class="btn">
				<button type="primary" :style="btn_style" class="btn-pry" @tap="uPublishTap">完成</button>
			</view>
		</view>
		<uni-popups ref="popups" type="center" style="width: 100%;" :maskClick="false">
			<view class="popup-box">
				<view class="popup-text">{{popup_text}}</view>
				<view class="popup-text1">长按识别下方二维码进行关注</view>
				<image :src="numlist.qrcode_url" mode="" class="QRcode-img"></image>
				<view @click="closePopup" class="popup-btnl" v-if="showhide">
					<image src="../../../static/images/guanbi.png" class="popup-img2"></image>
				</view>
			</view>
		</uni-popups>
		<w-picker v-if="selectList.length != 0" mode="selector" :defaultVal="['女']" @confirm="ConfirmSex" ref="selector"
		 themeColor="#f00" :selectList="selectList"></w-picker>
	</view>
</template>

<script>
	import oneInput from '../component/myp-one/myp-one.vue'
	import villageChooseHouse from '../../../appComponent/villagePage/villageChooseHouse';
	import EvanRadio from '../component/evan-radio/evan-radio.vue'
	import EvanRadioGroup from '../component/evan-radio/evan-radio-group.vue'
	import UniIcons from '../../../appComponent/uni/uni-icons/uni-icons2.vue'
	import uniPopups from "../../../appComponent/uni/uni-popups/uni-popups.vue"
	import wPicker from "../component/w-picker/w-picker.vue";
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	//这是开始加载的数据
	const getvisitorList = () => {
		common.post('HouseApi&a=empty_village_room_info', {
			pigcms_id: _this.pigcms_id,
		}, data => {
			console.log('++++', data)
			_this.numlist = data;
			_this.dataList = data.dataList;
			_this.attribute_list = data.attribute_list;
			_this.room_true_find = data.room_true_find;
			_this.listdata = data.find_info;
			_this.role_list = data.role_list;
			_this.phone = data.user_phone;
			_this.qrcode_url_status = data.qrcode_url_status;
			
			if(_this.dataList.length > 0){
				var hh = _this.dataList.filter(item => {
					return item.use_field != ''
				})
				console.log("hhhhhhh",hh)
				for (let i in hh[0].use_field) {
					let msg = {};
					msg['label'] = hh[0].use_field[i];
					msg['value'] = Number(i);
					_this.selectList.push(msg)
				}
				console.log("1232132131",_this.selectList)
			}else{
				_this.dataList = []
			}
			
			
			if(_this.qrcode_url_status == 1){
				//强制关注且不能关闭弹窗
				_this.open();
				_this.popup_text = "关注公众号后方可继续申请,以便接收消息通知";
				_this.showhide = false;
			}else if(_this.qrcode_url_status == 2){
				// 可关注可不关注 且弹窗可以关闭
				_this.qrcode_url_status = data.qrcode_url_status;
			}else{
				//不显示
				_this.closePopup();
			}
		});
	};
	const getconfirmbind = () => {
		common.post('HouseApi&a=village_room_info_add', {
			phone: _this.phone, //我的手机 已传
			name: _this.name, //我的名字 已传
			type: _this.type, //我的身份 已传
			master_phone: _this.master_phone, //手机尾号 已传
			memo: _this.remarks, //备注 已传
			id_card: _this.IDcard,//身份证号
			relatives_type: _this.relatives_type, //亲戚的身份 已传
			attribute: _this.attribute,
			pigcms_id: _this.pigcms_id,
			dataList: _this.dataList,
		}, data => {
			console.log('++++', data)
			if(_this.qrcode_url_status == 2){
				_this.open();
				_this.popup_text = "提交成功,请耐心等待后台审核,可关注公众号了解审核结果";
				_this.showhide = true;
			}else{
				uni.showModal({
					title: common.changeTxt('提示'),
					content: common.changeTxt(data),
					showCancel: false,
					confirmText: common.changeTxt('确定'),
					success: function(res) {
						if (res.confirm) {
							if (common.checkIsFooterPage("/pages/village_menu/index")) {
								wx.switchTab({
									url: "/pages/village_menu/index"
								});
							} else {
								wx.redirectTo({
									url: '/pages/village_menu/index',
								})
							}
						}
					}
				});
			}
		});
	};


	export default {
		data() {
			return {
				listdata: {},
				dataList: [],
				selectList: [],
				user_options: {},
				attribute_list: [],
				room_true_find: {},
				numlist: {},
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				btn_style: '',
				mobile_head_color: '',
				add_pigcms_id: 0,
				num: -1,
				num1: -1,
				num2: -1,
				test: '',
				role_list: [],
				phone: '',
				remarks: '', //备注
				phone1: '',
				name: '', //我的名字
				type: 0, //我的身份
				relatives_type: 0, // 亲戚身份
				master_phone: '', //手机尾号
				attribute: '', //身份属性
				choose_options: {},
				color1: 'red',
				aricle_title: "",
				qrcode_url_status: '',// 判断是否二维码是否关注
				popup_text: '',
				showhide:true,
				index_key:'',
				selectText: '',
				IDcard: '',
			}
		},
		onShow() {

			// #ifdef H5
			common.hideWxShare()
			// #endif


		},
		onLoad(options) {
			_this = this;
			_this.pigcms_id = options.pigcms_id
			// #ifdef H5
			console.log('准备跳小程序页', _this.pigcms_id);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			common.setMainColor(_this, function(config) {
				_this.mobile_head_color = config.config.mobile_head_color
				_this.actcolor = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor +
					';';

				// const res = uni.getStorageSync('village_key');
				// if (res) {
				// 	_this.village_id = res.village_id;
				// 	_this.pigcms_id = res.pigcms_id;
				// 	_this.village_name = res.village_name;
				// };
				// getvisitorList()
				_this.showMyPage();
			});
		},
		methods: {
			selectfamily(index, type) {
				_this.num = index;
				_this.type = type;
			},
			onGroupChange(e) {
				console.log(e)
				_this.type = e;
			},
			onRadioClick(index) {
				console.log("ttttttttt", index)
				_this.num = index;
				this.$refs.listRadio[index].select()
			},
			// 选择性别
			switchBtn(indexs, idx, itm) {
				_this.dataList[indexs]['num'] = idx;
				_this.dataList[indexs].value = itm;
				_this.$forceUpdate();
				console.log('indexs', indexs);
				console.log('idx', idx);
				console.log('itm', itm);
				console.log('list', _this.dataList);
			},
			selectpicker(indexs){
				_this.index_key = indexs;
				_this.$refs.selector.show()
			},
			selectrelative(indexs, relatives_type) {
				_this.num1 = indexs;
				_this.relatives_type = relatives_type;
			},
			//选择属性
			selectattribute(index, pigcms_id) {
				_this.num2 = index;
				_this.attribute = pigcms_id;
			},
			//选择好与不好的
			ConfirmSex(val) {
				console.log("33333333",val)
				var indexs = _this.index_key;
				_this.dataList[indexs].value = val.result;
				_this.selectText = val.result;
			},
			uPublishTap() {
				if (_this.num == -1) {
					uni.showModal({
						title: common.changeTxt('提示'),
						content: common.changeTxt('请选择我的角色'),
						showCancel: false,
						confirmText: common.changeTxt('确定'),
						success: function(res) {
							if (res.confirm) {

							}
						}
					});
				} else {
					if(_this.dataList.length > 0){
						var msg = '';
						var len = _this.dataList.length - 1;
						for(let i in _this.dataList){
							if(_this.dataList[i].is_must == 1 && _this.dataList[i].value == "" && !msg){
								msg = "请输入" + _this.dataList[i].title
							}
							if(i==len && !msg){
								console.log("到底提交了没")
								getconfirmbind()
							} else if (i==len && msg) {
								uni.showModal({
									title: common.changeTxt('提示'),
									content: msg,
									showCancel: false,
									confirmText: common.changeTxt('确定'),
									success: function(res) {
										if (res.confirm) {
								
										}
									}
								});
							}
						}
					}else{
						getconfirmbind()
					}
					
				}
			},
			finished(val) {
				_this.master_phone = val
			},
			showMyPage() {
				console.log('我的', app.globalData.is_login)
				const res = uni.getStorageSync('village_key');
				if (res) {
					if (_this.pigcms_id && _this.pigcms_id != res.pigcms_id) {
						console.log('换房子了', _this.pigcms_id, res.pigcms_id)
						_this.listData = {};
					}
					_this.village_id = res.village_id;
					// _this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
					if (res.property_id && res.property_id > 0) {
						_this.property_id = res.property_id;
					}
				}
				if (app.globalData.is_login) {

					_this.choose_options = {};

					console.log('village_id----------', _this.village_id);
					console.log('pigcms_id++++++++', _this.pigcms_id);
					if (!_this.village_id) {
						console.log('village_id++++++++', _this.village_id);
						uni.showModal({
							title: common.changeTxt('提示'),
							content: common.changeTxt('您没有选择小区,请选择一个小区浏览'),
							showCancel: false,
							confirmText: common.changeTxt('选择'),
							success: function(res) {
								if (res.confirm) {
									var url = '/pages/village/my/villagelist';
									if (_this.property_id && _this.property_id > 0) {
										url += '?property_id=' + _this.property_id;
									}
									uni.redirectTo({
										url: url
									});
								}
							}
						});
					} else if (!_this.pigcms_id) {

						_this.choose_options = {
							need_choose_house: true,
							village_id: _this.village_id,
							after_event: '',
							canCancle: false,
							bindHasCancleMethod: false
						}
						console.log('choose_options', _this.choose_options);
					} else {
						getvisitorList()
					}
				} else {

					_this.user_options = {
						toLogin: true
					};
				}
			},
			getUserInfo(e) {
				console.log('user.info', e.userInfo);
				if (e.userInfo) {
					_this.showMyPage();
				} else {
					uni.navigateBack();
				}
			},
			open(){
				_this.$refs.popups.open()
			},
			closePopup(){
				if(_this.qrcode_url_status == 2){
					_this.$refs.popups.close()
					if (common.checkIsFooterPage("/pages/village_menu/index")) {
						wx.switchTab({
							url: "/pages/village_menu/index"
						});
					} else {
						wx.redirectTo({
							url: '/pages/village_menu/index',
						})
					}
				}else{
					_this.$refs.popups.close()
				}
				
			}
		},
		components: {
			oneInput,
			villageChooseHouse,
			EvanRadio,
			EvanRadioGroup,
			UniIcons,
			uniPopups,
			wPicker,
		}
	}
</script>

<style>
	page {
		background: rgb(245, 245, 245);
	}

	.container {
		margin: 0;
		padding: 0;
		background: rgb(245, 245, 245);
	}

	.container-box {
		background: #FFFFFF;
		background: rgb(245, 245, 245);
	}

	.topbox {
		padding: 0 40rpx 20rpx;
	}

	.text {
		font-size: 28rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
	}

	.address-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-top: 10rpx;
		width: 100%;
	}

	.address-icon {
		width: 20rpx;
		height: 24rpx;
		flex-shrink: 0;
		margin-top: 9rpx;
	}

	.address-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.address-text {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
		margin-left: 15rpx;
	}

	.myrole {
		padding: 30rpx;
		margin-top: 15rpx;
		background: #FFFFFF;
	}

	.my-text {
		font-size: 30rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		color: #333333;
	}

	.role-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 30rpx;
		flex-wrap: wrap;
	}

	.role-box1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 10rpx;
		flex-wrap: wrap;
	}

	.chose-btn {
		width: 155rpx;
		height: 60rpx;
		background-color: #f4f4f4;
		border: solid 3rpx #f4f4f4;
		border-radius: 10rpx;
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #333333;
		text-align: center;
		margin-left: 54rpx;
	}

	.chose-btn1 {
		width: 155rpx;
		height: 60rpx;
		background-color: #f4f4f4;
		border: solid 3rpx #f4f4f4;
		border-radius: 10rpx;
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #333333;
		text-align: center;
		margin-left: 54rpx;
		margin-top: 20rpx;
	}

	.active {
		width: 155rpx;
		height: 60rpx;
		background-color: #ecf4ff;
		border-radius: 10rpx;
		border: solid 3rpx #2681f3;
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #2681f3;
		text-align: center;
	}

	.phone {
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		color: #999999;
	}

	.input-box {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 15rpx;
	}

	.role-text {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 20rpx;
	}

	.role-icon {
		width: 30rpx;
		height: 30rpx;
		flex-shrink: 0;
		margin-right: 10rpx;
	}

	.role-img {
		width: 100%;
		height: 100%;
	}

	.text1 {
		font-size: 22rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 44rpx;
		letter-spacing: 0rpx;
		color: #999999;
	}

	.card-list {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0;
		border-bottom: 2rpx solid #F1F1F1;
	}

	.card-lists {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 15rpx 0rpx;
		border-bottom: 2rpx solid #F1F1F1;
	}

	.card-name {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 100rpx;
		letter-spacing: 0rpx;
		color: #858484;
		flex-shrink: 0;
	}

	.top-title {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #858484;
		flex-shrink: 0;
	}

	.btn {
		margin: 74rpx 0rpx;
		height: 100%;
		width: 100%;
	}

	.btn-pry {
		width: 550rpx;
		height: 98rpx;
		background: #2681f3;
		border-radius: 49rpx;
		line-height: 98rpx;
		margin-top: 80rpx;
	}

	.evan-radio-show__group-item {
		padding: 20rpx 0rpx;
	}

	.evan-radio-show__group-item:nth-child(-n+2) {
		border-bottom: 2rpx solid #F1F1F1;
	}

	.switch-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 20rpx;
	}

	.switch {
		width: 22rpx;
		height: 22rpx;
		border-radius: 22rpx;
		background: #FFFFFF;
		border: 2rpx solid #e1e1e1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.switch-mini {
		width: 15rpx;
		height: 15rpx;
		border-radius: 15rpx;
		background: #e1e1e1;
	}

	.switch1 {
		width: 22rpx;
		height: 22rpx;
		border-radius: 22rpx;
		background: #FFFFFF;
		border: 2rpx solid rgb(29, 126, 247);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.switch-mini1 {
		width: 15rpx;
		height: 15rpx;
		border-radius: 15rpx;
		background: rgb(29, 126, 247);
	}

	.switch-text {
		margin-left: 15rpx;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 50rpx;
		letter-spacing: 0rpx;
		color: #606060;
	}
	.popup-box {
		width: 600rpx;
		/* height: 650rpx; */
		background-color: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.popup-text {
		text-align: center;
		font-weight:700;
		margin-top: 30rpx;
	}
	.popup-text1 {
		margin-top: 30rpx;
	}
	.QRcode-img {
		margin: 50rpx 0rpx;
		width: 400rpx;
		height: 400rpx;
	}
	.popup-btnl {
		position: absolute;
		bottom: -100rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 40rpx;
		border-radius: 58rpx;
		font-size: 26rpx;
		background-color: #ffffff;
		padding: 16rpx;
	}
	
	.popup-img2 {
		width: 100%;
		height: 100%;
	}
	.right-icon {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.right-img {
		width: 30rpx;
		height: 30rpx;
		display: block;
	}
</style>
